<script lang="ts">
export default {
  name: "xt-drawer",
};
</script>

<script setup lang="ts">
import { ElDrawer } from "element-plus";

interface Props {
  size?: number | string;
  appendToBody?: boolean;
  closeOnClickModal?: boolean;
}

withDefaults(defineProps<Props>(), {
  size: "72%",
  appendToBody: true,
  closeOnClickModal: false,
});
</script>

<template>
  <el-drawer
    class="xt-drawer"
    :size="size"
    :close-on-click-modal="closeOnClickModal"
    :append-to-body="appendToBody"
  >
    <template v-for="(_value, name) in $slots" #[name]="scope" :key="name">
      <slot :name="name" v-bind="scope || {}"></slot>
    </template>
  </el-drawer>
</template>

<style lang="scss">
@use "../../../scss/xt-drawer.scss";
@use "../../../scss/xt-overlay.scss";
</style>

<style lang="scss">
.xt-drawer {
  padding: 0;

  .el-drawer__header {
    height: 56px;
    padding: 0 10px;
    line-height: 56px;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
  }

  .el-drawer__body {
    padding: 10px;
  }

  .el-drawer__footer {
    padding: 10px;
    border-top: 1px solid #dcdfe6;
  }
}
</style>
